<template>
    <!-- 天气雷达 -->
    <!-- 初步完结-2024-10-8 -->
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">天气实况统计</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>天气雷达</span>
            </span>
        </div>
        <div>
            <el-tabs v-model="type" @tab-click="changeType" v-if="user === '雅安'">
                <el-tab-pane label="雷达回波" name="雷达回波">
                    <div class="content" v-loading="loading">
                        <img :src="urlData[0]?.minioUrl" alt="图片无法显示" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="回波动图" name="回波动图">
                    <div class="content" v-loading="loading">
                        <img :src="urlData[1]?.minioUrl" alt="图片无法显示" id="gif" />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="1h雨量预报" name="1h雨量预报">
                    <div class="content" v-loading="loading">
                        <img :src="urlData[2]?.minioUrl" alt="图片无法显示" />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="乡镇告警" name="乡镇告警">
                    <div class="content" v-loading="loading">
                        <div class="table">
                            <div class="table_title">
                                <span style="font-size: 18px;margin-bottom: 10px">未来一小时受强降雨影响村组</span>
                                <span class="time" style="font-size: 12px;">2024-06-19 20:17-2024-06-19 21:17</span>
                            </div>
                            <el-table tripe ref="filterTable" :data="tableData" v-loading="loading"
                                :header-cell-style="headerCellStyle">
                                <el-table-column prop="area" label="区县" min-width="15%" align="center">
                                </el-table-column>
                                <el-table-column prop="town" label="乡镇" min-width="15%" align="center">
                                </el-table-column>
                                <el-table-column prop="station" label="监测点" min-width="50%" align="center">
                                </el-table-column>
                                <el-table-column prop="max_rainfall" label="最大雨量(mm)" min-width="20%" align="center">
                                </el-table-column>
                            </el-table>

                        </div>

                        <el-divider></el-divider>

                        <div class="chart">
                            <div class="chart_title">
                                <span style="font-size: 18px;margin-bottom: 10px">未来一小时受强降雨影响村组统计图</span>
                                <span class="time" style="font-size: 12px;">2024-06-19 20:17-2024-06-19 21:17</span>
                            </div>
                            <div class="chart_box" id="chart_box">

                            </div>
                        </div>
                    </div>

                </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="type" @tab-click="changeType" v-else>
                <el-tab-pane label="雷达回波" name="雷达回波">
                    <div class="content" v-loading="loading">
                        <img :src="urlData[0]?.minioUrl" alt="图片无法显示" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="全市动图" name="全市动图">
                    <div class="content" v-loading="loading">
                        <img :src="urlData[1]?.minioUrl" alt="图片无法显示" id="gif" />
                    </div>
                </el-tab-pane>

                <el-tab-pane :label='`${county}动图`' :name='`${county}动图`'>
                    <div class="content">
                        <img :src="countyUrl" alt="图片无法显示" />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="乡镇告警" name="乡镇告警">
                    <div class="content" v-loading="loading">
                        <div class="table">
                            <div class="table_title">
                                <span style="font-size: 18px;margin-bottom: 10px">未来一小时受强降雨影响村组</span>
                                <span class="time" style="font-size: 12px;">2024-06-19 20:17-2024-06-19 21:17</span>
                            </div>
                            <el-table tripe ref="filterTable" :data="tableData" v-loading="loading"
                                :header-cell-style="headerCellStyle">
                                <el-table-column prop="area" label="区县" min-width="15%" align="center">
                                </el-table-column>
                                <el-table-column prop="town" label="乡镇" min-width="15%" align="center">
                                </el-table-column>
                                <el-table-column prop="station" label="监测点" min-width="50%" align="center">
                                </el-table-column>
                                <el-table-column prop="max_rainfall" label="最大雨量(mm)" min-width="20%" align="center">
                                </el-table-column>
                            </el-table>

                        </div>

                        <el-divider></el-divider>

                        <div class="chart">
                            <div class="chart_title">
                                <span style="font-size: 18px;margin-bottom: 10px">未来一小时受强降雨影响村组统计图</span>
                                <span class="time" style="font-size: 12px;">2024-06-19 20:17-2024-06-19 21:17</span>
                            </div>
                            <div class="chart_box" id="chart_box">

                            </div>
                        </div>
                    </div>

                </el-tab-pane>
            </el-tabs>

        </div>

    </div>
</template>

<script>
import Cookies from 'js-cookie';
//引入echarts
import * as echarts from 'echarts';
import { reqRadarPic } from '@/api/monitor/index.js'

export default {
    name: "weather_radar",
    data() {
        return {
            //加载标志
            loading: false,
            type: '雷达回波',
            tableData: [
                {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                }, {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                }, {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                }, {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                }, {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                }, {
                    area: '天全县',
                    town: '新业乡',
                    station: '峡口村6组,峡口村7组,兴业乡',
                    max_rainfall: '50.0'
                },],
            // 图片地址
            urlData: [],
            //用户
            county: Cookies.get('county')
        }
    },
    mounted() {
        this.initCharts()
        this.getRadarPicData()

    },
    computed: {
        // 区县图片地址
        // http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_县名首字母小写.gif
        countyUrl() {
            switch (Cookies.get('county')) {
                case '宝兴':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_bx.gif'
                case '石棉':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_sm.gif'
                case '名山':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_ms.gif'
                case '荥经':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_yj.gif'
                case '经开':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_ms.gif'
                case '天全':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_tq.gif'
                case '芦山':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_ls.gif'
                case '雨城':
                    return 'http://nr.yaqxj.com.cn/pro_user/zyfw/pprog/rad/radar_yc.gif'
            }
        }
    },
    methods: {
        // 表格样式
        headerCellStyle() {
            return {
                background: '#223b7a',
                color: '#fff',
            };
        },

        // 初始化echarts
        initCharts() {
            let chartDom = document.getElementById('chart_box');
            // 设置echarts容器大小，否则初次渲染大小不对
            let myChart = echarts.init(chartDom);
            let option;
            option = {

                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,//开启提示线文字
                                position: 'outer',//设置文字的所在的位置
                                borderWidth: 20,//大小设置
                                borderRadius: 4,

                                rich: {
                                    //设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）
                                    c: {
                                        fontSize: 16,
                                        lineHeight: 12,
                                    }
                                },
                            }
                        },
                        emphasis: {
                            label: {
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            { value: 1048, name: '雨城区' },
                            { value: 735, name: '庐山县' },
                            { value: 580, name: '天全县' },
                            { value: 484, name: '宝兴县' },
                            { value: 300, name: '荥经' }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            // // 图片根据屏幕大小自适应
            // window.onresize = function () {
            //     myChart.resize();
            // }
        },
        // 切换标签页
        changeType() {
            console.log(this.type)
            if (this.type === '回波动图') {
                this.getRadarPicData()
            }
        },
        async getRadarPicData() {
            this.loading = true
            const result = await reqRadarPic()
            if (result.status === 200) {
                this.loading = false
                this.urlData = result.data.data
            }
            else {
                this.loading = false
                this.$message.error(result.msg)
            }

        }
    }
}
</script>

<style scoped lang="scss">
.my-tabs>>>.el-tabs__item.is-active {
    background: rgba(0, 102, 255, 0.08);
    border-radius: 4px 4px 3px 3px;
}

.my-tabs>>>.el-tabs__active-bar {
    background-color: #166fe8;
    height: 3px;

}

:deep(.el-tabs__active-bar)::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 39%;
    bottom: 2px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 5px solid #166fe8;
}

:deep(.el-tabs__item) {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px !important;
    padding: 0 !important;
}

:deep(.el-tabs__item.is-active) {
    color: #409eff;
}

:deep(.el-tabs__nav.is-top) {
    display: flex;
}

:deep(.el-tabs__nav.is-top)>div {
    width: 100px;
    text-align: center;
}

.el-tabs__nav-scroll {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.el-table__row {
    width: 100% !important;
    height: 50px !important;
}

.container {
    img {
        width: 60%;
        height: 60%;
        display: block;
        margin: 0 auto;
    }

    .table {
        margin-top: 50px;
        margin-bottom: 50px;
        width: 100%;
        height: 50%;

        .el-table {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            overflow: auto;
            border-radius: 5px;
            box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, .2);
        }

        .table_title {
            margin-bottom: 50px;
            width: 100%;
            height: 100px;
            display: flex;
            flex-wrap: wrap;

            span {
                width: 100%;
                height: 50%;
                font-size: 20px;
                font-weight: bolder;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
            }

            .time {
                font-size: 16px;
                font-weight: normal;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .chart {
        margin-top: 50px;
        width: 100%;
        height: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        .chart_title {
            width: 100%;
            height: 100px;
            display: flex;
            flex-wrap: wrap;

            span {
                width: 100%;
                height: 50%;
                font-size: 20px;
                font-weight: bolder;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
            }

            .time {
                font-size: 16px;
                font-weight: normal;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
            }
        }

        .chart_box {
            margin-top: 50px;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;



        }
    }
}
</style>